<template>
  <!-- 品控经理 审核选择是否需要总经理 -->
  <div class="courseBaseDialog">
    <el-dialog
      v-loading="loading"
      :visible="open"
      width="480px"
      @close="cancel()"
      :close-on-click-modal="false"
    >
      <div class="el-message-box__header" slot="title">
        <div class="el-message-box__title flex">
          <img src="@/assets/images/reminder.png" alt=""/>
          <div class="el-message-box__title-text">{{ title }}</div>
        </div>
      </div>
      <!-- 开关功能组 -->
      <div v-if="isSetting">
        <div class="el-message-box__content" v-if="title == '停用确认'">
          <!-- <div class="el-message-box__container">
          <div class="el-message-box__status el-icon-warning"></div>
          <div class="el-message-box__message">点击确认，通过审核。</div>
        </div> -->
          <div>停用后：</div>
          <div>1、清空所有课程和学科专业组的关联关系！</div>
          <div>2、默认关闭学科专业组审核课程流程！</div>
          <div>3、自动通过待学科专业组审核课程！</div>
          <div>4、教师无法选择课程的学科专业组且无法查看相关内容！</div>
          <div
            style="margin: 15px 0 0 0"
            :class="[redOpen && !need ? 'redBlink' : '', 'redOpen']"
          >
            <el-checkbox v-model="need">确认阅读并知晓上述内容</el-checkbox>
          </div>
        </div>
        <div class="el-message-box__content redOpen" v-else>
          <div>启用后请尽快完善学科专业组，防止教师编辑课程后无法保存！</div>
          <div>课程审核流程变更请前往【配置管理-审核配置】中处理！</div>
        </div>
      </div>
      <!-- 专业组启用停用 -->
      <div v-else>
        <div class="el-message-box__content" v-if="title == '停用确认'">
          <div>停用后：</div>
          <div>1、清空所有课程和本学科专业组的关联关系！</div>
          <div>2、自动通过待学科专业组审核课程！</div>
          <div>3、课程无法选择本学科专业组！</div>
          <div
            style="margin: 15px 0 0 0"
            :class="[redOpen && !need ? 'redBlink' : '', 'redOpen']"
          >
            <el-checkbox v-model="need">确认阅读并知晓上述内容</el-checkbox>
          </div>
        </div>
      </div>
      <div class="el-message-box__btns">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  disciplineGroup_onOff,
  disciplineGroup_changeStatus
} from '@/api/disciplineGroup/disciplineGroup'

export default {
  props: {
    open: Boolean,
    title: [Number, String],
    isSetting: Boolean,
    disciplineGroup: Object
  },
  data() {
    return {
      need: false,
      redOpen: false,
      loading: false
    }
  },
  watch: {
    open(e) {
      if (e) {
        this.need = false
        this.redOpen = false
      }
    }
  },
  mounted() {
  },
  methods: {
    async submit() {
      if (!this.need && this.title == '停用确认') {
        this.redOpen = true
        setTimeout(() => {
          this.redOpen = false
        }, 1000)
      } else {
        try {
          this.loading = true
          let res
          // 功能开关 1是启用 0是关闭
          if (this.isSetting) {
            res = await disciplineGroup_onOff(this.title == '启用确认' ? 1 : 0)
            if (res.code == 200) {
              this.$modal.msgSuccess(
                `${this.title == '启用确认' ? '启用成功' : '停用成功'}`
              )
              this.$emit('update:open', false)
              this.$emit('refresh', {
                isSetting: this.isSetting,
                status: this.title == '启用确认' ? 1 : 0
              })
            }
          }
          // 学科专业组启用停用 1是关闭 0是启用
          else {
            res = await disciplineGroup_changeStatus({
              disciplineGroupId: this.disciplineGroup.disciplineGroupId,
              status: this.title == '启用确认' ? 0 : 1
            })
            if (res.code == 200) {
              this.$modal.msgSuccess(
                `${this.title == '启用确认' ? '启用成功' : '停用成功'}`
              )
              this.$emit('update:open', false)
              this.$emit('refresh', {
                isSetting: this.isSetting,
                status: this.title == '启用确认' ? 0 : 1
              })
            }
          }
        } finally {
          this.loading = false
        }
      }
    },
    cancel() {
      // 已取消
      if (this.open === false) {
        // 如果 open 已经是 false，则不需要额外处理
        return
      }
      this.$modal.msgInfo(`已取消`)
      if (this.isSetting) {
        this.$emit('refresh', {
          isSetting: this.isSetting,
          status: this.title == '启用确认' ? 0 : 1
        })
      } else {
        this.$emit('refresh', {
          isSetting: this.isSetting,
          status: this.title == '启用确认' ? 1 : 0
        })
      }

      this.$emit('update:open', false)
    }
  }
}
</script>
<style scoped lang="scss">
.redOpen {
  color: #dc362e !important;

  ::v-deep .el-checkbox__label {
    color: #dc362e !important;
  }

  ::v-deep .el-checkbox__inner {
    border: 1px solid #dc362e !important;
  }
}

.redBlink {
  animation: blink 0.5s 2; /* 应用闪烁动画 */
}

/* 定义闪烁动画 */
@keyframes blink {
  0%,
  30% {
    transform: translateY(-1px); /* 向上平移 */
    color: #ff4d4d; /* 亮红色 */
    opacity: 1; /* 文字完全可见 */
  }
  30.01%,
  100% {
    transform: translateY(0); /* 恢复原位 */
    color: #ffcccc; /* 淡红色 */
    opacity: 0.6; /* 文字稍微变淡 */
  }
}

.courseBaseDialog {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #dc362e;
  }

  .el-message-box__header {
    .el-message-box__title-text {
      line-height: 24px;
    }

    img {
      width: 24px;
      height: 24px;
      margin-right: 16px;
    }

    padding: 32px 15px 10px 32px !important;
  }

  .el-message-box__content {
    width: 480px;
    padding: 0 32px 24px 72px !important;
  }

  ::v-deep .el-dialog .el-dialog__header {
    border-bottom: none;
    padding: 0 !important;
  }

  ::v-deep .el-message-box__btns .el-button {
    margin-left: 10px;
  }

  ::v-deep .el-message-box__btns {
    padding-right: 32px;
    padding-bottom: 24px;
  }

  ::v-deep .el-dialog .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
